<script setup lang="ts">
import { ElMessage } from 'element-plus';

import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import service from "~/service"
import type { ElForm } from 'element-plus'

import { User, Lock, View } from "@element-plus/icons-vue"

import centerIcon from '~/assets/center-bg.png'
import leftIcon from '~/assets/left-bg.png'

const validateUsername = (rule: any, value: any, callback: any) => {
    if (value.trim().length <= 3) {
        callback(new Error("请输入正确的用户名"));
    } else {
        callback();
    }
};
const validatePass = (rule: any, value: any, callback: any) => {
    if (value.length < 3) {
        callback(new Error("密码不能小于3位"));
    } else {
        callback();
    }
};

const loginRules = {
    username: [
        {
            required: true,
            validator: validateUsername,
            trigger: 'blur',
        }
    ],
    password: [
        {
            required: true,
            validator: validatePass,
            trigger: 'blur',
        }
    ]
}

const router = useRouter()

const formRef = ref<FormInstance>()

type FormInstance = InstanceType<typeof ElForm>

const loginForm = reactive({
    username: '',
    password: ''
})

const loading = ref(false)

const centerImg = ref(centerIcon)
const leftImg = ref(leftIcon)

const pwdType = ref('password')

const store = useStore();

const handleLogin = async (formEl?: FormInstance) => {
    if (!formEl) {
        return
    }
    try {
        const result = await formEl.validate();
        if (result) {
            loading.value = true
            const res = await service.syetem.login(loginForm)
            loading.value = false
            if (res.code === 200) {
                window.sessionStorage.setItem('usename', res.data.username)
                window.sessionStorage.setItem('fullName', res.data?.fullName || '')
                store.commit('setUser', res.data);
                router.push({
                    path: '/'
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: res.msg
                })
            }
        }
    } catch (error) {
        console.log(error)
    }
}

const showPwd = () => {
    if (pwdType.value === "password") {
        pwdType.value = "";
    } else {
        pwdType.value = "password";
    }
}

const handleGoToPassword = () => {
    router.push({
        path: '/client/password'
    })
}

const handleGoToRegister = () => {
    router.push({
        path: '/client/partner-register'
    })
}
</script>

<template>
  <div class="app-login">
    <img :src="centerImg" alt="" />
    <div class="center">
      <div class="left">
        <img :src="leftImg" alt="" />
      </div>
      <div class="right">
        <div class="title">欢迎来到百科汇采</div>
        <div class="sub-title">请登录业务合伙人管理系统</div>
        <el-form
          autocomplete="on"
          :model="loginForm"
          :rules="loginRules"
          ref="formRef"
          label-position="left"
        >
          <el-form-item prop="username">
            <el-input
              name="username"
              type="text"
              v-model="loginForm.username"
              autocomplete="on"
              :prefix-icon="User"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              name="password"
              :type="pwdType"
              @keyup.enter.native="handleLogin(formRef)"
              v-model="loginForm.password"
              autocomplete="on"
              :prefix-icon="Lock"
              placeholder="请输入密码"
            >
              <span slot="suffix" @click="showPwd">
                <Check class="icon" />
              </span>
            </el-input>
          </el-form-item>
          <div style="margin-top: 48px;">
            <el-button
              style="width: 100%"
              type="primary"
              :loading="loading"
              @click.native.prevent="handleLogin(formRef)"
            >登录</el-button>
          </div>
        </el-form>
        <div class="tool">
          <span class="link" @click="handleGoToPassword">忘记密码</span>
          <span class="link" @click="handleGoToRegister" style="margin-left: 24px;">注册账号</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-login{
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-login > img{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.center{
  height: 796px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-around;
}
.left{
  width: 52%;
}
.left img{
  width: 100%;
}
.right{
  width: 482px;
  height: 500px;
  text-align: left;
  box-shadow: 0px 0px 50px 20px rgb(10 71 131 / 50%);
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 11px;
  box-sizing: border-box;
  padding: 84px;
}
.tool{
  margin-top: 24px;
}
.link{
  color: #0af;
  cursor: pointer;
}
.title{
  font-size: 32px;
  font-weight: 700;
  color: #314155;
}
.sub-title{
  font-size: 24px;
  font-weight: 700;
  margin: 12px 0 36px;
  color: #314155;
}
</style>
